<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
   Copyright 2009 Jeremy Thomerson
   
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
-->
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
		<link href="styles.css" type="text/css" rel="stylesheet" />
		
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.js" type="text/javascript"></script>
		<link href="/jvaljs/jval.css" type="text/css" rel="stylesheet" />
		<script src="/jvaljs/jval.utils.js" type="text/javascript"></script>
		<script src="/jvaljs/jval.core.js" type="text/javascript"></script>
		<script src="/jvaljs/jval.handlers.js" type="text/javascript"></script>
		<script src="/jvaljs/jval.validators.js" type="text/javascript"></script>
		<script type="text/javascript">
			$().ready(function() {
				jVal.addValidatorOnEvent('blur', new RequiredValidator($('#exampleForm input[name="firstName"]')[0], 'First Name', 'You must enter your first name'));
				jVal.addValidatorOnEvent('blur', new RequiredValidator($('#exampleForm input[name="lastName"]')[0], 'Last Name', 'You must enter your last name'));
				jVal.addValidatorOnEvent('blur', new RequiredValidator($('#exampleForm input[name="email"]')[0], 'Email Address', 'You must enter your email address'));
				jVal.addValidatorOnEvent('blur', new EmailAddressValidator($('#exampleForm input[name="email"]')[0], 'Email Address', 'You must enter a valid email address'));
				
				jVal.addEveryElementHandler(new ChangeClassHandler('successful', 'failed'), $('#exampleForm'));
				jVal.addEveryElementHandler(new MessagePerFieldHandler(), $('#exampleForm'));

				//jVal.addFormLevelHandler(new FormFeedbackPanel($('#exampleFormFeedback'), false), $('#exampleForm'), JValidationEngine.ERROR_ONLY);
				
				//jVal.addElementLevelHandler(new AbstractElementHandler('email address failed validation'), $('#exampleForm input[name="email"]')[0], JValidationEngine.ERROR_ONLY);
				$('#exampleForm').submit(function(evt) {
					return jVal.validateForm(this);
				});
			});
		</script>
		<title>example</title>
	</head>
	<body>
		<form id="exampleForm" action="submitted.html" method="post">
			<div id="exampleFormFeedback"></div>
			<div class="formField">
				<label for="firstName">First name:</label>
				<input type="text" name="firstName" />
			</div>
			<div class="formField">
				<label for="lastName">Last name:</label>
				<input type="text" name="lastName" />
			</div>
			<div class="formField">
				<label for="email">Email address:</label>
				<input type="text" name="email" />
			</div>
			<div class="formField">
				<label for="username">Username:</label>
				<input type="text" name="username" />
			</div>
			<div class="formField">
				<label for="password">Password:</label>
				<input type="password" name="password" />
			</div>
			<div class="formField">
				<label for="password2">Verify password:</label>
				<input type="password" name="password2" />
			</div>
			<div class="formField">
				<label for="phoneNumber">Phone number:</label>
				<input type="text" name="phoneNumber" />
			</div>
			<div class="formField">
				<label for="rangeTest">Number between 10 and 20 (inclusive):</label>
				<input type="text" name="rangeTest" />
			</div>
			<div class="formField">
				<label for="submitButton">&nbsp;</label>
				<input type="submit" name="submitButton" value="Submit form" />
			</div>
		</form>
	</body>
</html>
